<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://www.echartsjs.com/gallery/vendors/echarts/echarts-all-3.js"></script>
</head>
<body>
    <p>
        <div id="chart1" style="width: 800px;height:480px;"></div>
    </p>
    
    <p>
        <div id="chart2" style="width: 800px;height:480px;"></div>
    </p>
    
    <p>
        <div id="chart3" style="width: 800px;height:480px;"></div>
    </p>
    
    <p>
        <div id="chart4" style="width: 800px;height:480px;"></div>
    </p>
    
    <script type="text/javascript">
        var myChart1 = echarts.init(document.getElementById('chart1'));
        var myChart2 = echarts.init(document.getElementById('chart2'));
        var myChart3 = echarts.init(document.getElementById('chart3'));
        var myChart4 = echarts.init(document.getElementById('chart4'));
        
option1 = {
    title : {
        text: '1. 您多久使用一次快递服务？',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        x : 'center',
        y : 'bottom',
        data:['每天','每周','每月','更长']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: true},
            magicType : {
                show: true,
                type: ['pie', 'funnel']
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : [
        {
            name:'半径模式',
            type:'pie',
            radius : [25, 110],
            center : ['25%', '50%'],
            roseType : 'radius',
            label: {
                normal: {
                    show: true,
                    formatter: '{b}({d}%)'
                },
                emphasis: {
                    show: true
                }
            },
            lableLine: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data:[
                {value:192, name:'每天'},
                {value:4024, name:'每周'},
                {value:4572, name:'每月'},
                {value:1212, name:'更长'},
            ]
        },
        {
            name:'面积模式',
            type:'pie',
            radius : [30, 110],
            center : ['75%', '50%'],
            roseType : 'area',
            label: {
                normal: {
                    formatter: '{b}({d}%)'
                }
            },
            data:[
                {value:192, name:'每天'},
                {value:4024, name:'每周'},
                {value:4572, name:'每月'},
                {value:1212, name:'更长'},
            ]
        }
    ]
};

option2 = {
    title : {
        text: '2. 您经常将快递服务用于什么方向？',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        x : 'center',
        y : 'bottom',
        data:['购物','私人物品','贵重物']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true,
                type: ['pie', 'funnel']
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : [
        {
            name:'半径模式',
            type:'pie',
            radius : [25, 110],
            center : ['30%', '50%'],
            roseType : 'radius',
            label: {
                normal: {
                    show: true,
                    formatter: '{b}({d}%)'
                },
                emphasis: {
                    show: true
                }
            },
            lableLine: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data:[
                {value:6494, name:'购物'},
                {value:2867, name:'私人物品'},
                {value:639, name:'贵重物'},
            ]
        },
        {
            name:'面积模式',
            type:'pie',
            radius : [30, 110],
            center : ['70%', '50%'],
            roseType : 'area',
            label: {
                normal: {
                    formatter: '{b}({d}%)'
                }
            },
            data:[
                {value:6494, name:'购物'},
                {value:2867, name:'私人物品'},
                {value:639, name:'贵重物'},
            ]
        }
    ]
};

option3 = {
    title : {
        text: '3. 您认为快递服务中，哪一个最令人满意？',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        x : 'center',
        y : 'bottom',
        data:['城际次日达','同城速递','国际物流']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true,
                type: ['pie', 'funnel']
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : [
        {
            name:'半径模式',
            type:'pie',
            radius : [25, 110],
            center : ['30%', '50%'],
            roseType : 'radius',
            label: {
                normal: {
                    show: true,
                    formatter: '{b}({d}%)'
                },
                emphasis: {
                    show: true
                }
            },
            lableLine: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data:[
                {value:6283, name:'城际次日达'},
                {value:2840, name:'同城速递'},
                {value:877, name:'国际物流'},
            ]
        },
        {
            name:'面积模式',
            type:'pie',
            radius : [30, 110],
            center : ['70%', '50%'],
            roseType : 'area',
            label: {
                normal: {
                    formatter: '{b}({d}%)'
                }
            },
            data:[
                {value:6283, name:'城际次日达'},
                {value:2840, name:'同城速递'},
                {value:877, name:'国际物流'},
            ]
        }
    ]
};

option4 = {
    title : {
        text: '4. 您为什么选择网上购物？',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        x : 'center',
        y : 'bottom',
        data:['价格因素','便捷因素','质量因素','其他']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true,
                type: ['pie', 'funnel']
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : [
        {
            name:'半径模式',
            type:'pie',
            radius : [25, 110],
            center : ['30%', '50%'],
            roseType : 'radius',
            label: {
                normal: {
                    show: true,
                    formatter: '{b}({d}%)'
                },
                emphasis: {
                    show: true
                }
            },
            lableLine: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data:[
                {value:3291, name:'价格因素'},
                {value:2949, name:'便捷因素'},
                {value:2582, name:'质量因素'},
                {value:1178, name:'其他'},
            ]
        },
        {
            name:'面积模式',
            type:'pie',
            radius : [30, 110],
            center : ['70%', '50%'],
            roseType : 'area',
            label: {
                normal: {
                    formatter: '{b}({d}%)'
                }
            },
            data:[
                {value:3291, name:'价格因素'},
                {value:2949, name:'便捷因素'},
                {value:2582, name:'质量因素'},
                {value:1178, name:'其他'},
            ]
        }
    ]
};

        myChart1.setOption(option1);
        myChart2.setOption(option2);
        myChart3.setOption(option3);
        myChart4.setOption(option4);
    </script>
</body>
</html>